<template>
    <div class="bbox">
      <div class="box">
        <div class="title">广汽 HONDA</div>
        <div class="ftitle">让 梦 走 得 更 远</div>
        <div class="yw">INVITATION</div>
        <div class="yqh">
          <img src="../../images/yqh.png" alt="" />
        </div>
        <div class="hr"></div>
        <div class="white neir">诚挚邀请您参加广汽本田<div style="letter-spacing: .17rem; display:inline-block">原厂空调滤芯助力活动</div></div>
        <div class="hr"></div>
        <div class="yp">
          <img src="../../images/yp.png" alt="" />
        </div>
        <div class="white">
          <div class="liaohao">料号：08D01ALLGH2 / 08D01ALLGH1</div>
          <div class="ti">活动内容</div>
          <div class="wenben wen">
            活动期间，给予店端销售的广汽本田纯正用品原厂空调滤芯产品，相应的活动支持。
          </div>
          <div class="ti">活动时间</div>
          <div class="wens">023年8月1日-2023年9月30日</div>
        </div>
        <div class="jt" @click="$router.push('/user')">
          <img src="../../images/jt.png" alt="" />
        </div>
      </div>
    </div>
  </template>
  
  <script setup></script>
  
  <style scoped>
  .bbox {
    width: 100%;
    height: 100vh;
    background: url(../../images/bg.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    position: relative;
  }
  .box{
    width: 80vw;
    margin: 0 auto;
    height: 100vh;
  }

  .yw {
    font-size: 1.5rem;
    font-weight: 400;
    color: #fee2a8;
    padding-top: 2rem;
    letter-spacing: .1rem;
  }
  .title {
    padding-top: .625rem;
    font-size: .6rem;
    color: #fff;
    font-weight: bold;
  }
  .ftitle {
    color: #fff;
   transform: scale(0.4);
    letter-spacing: .25rem;
    position: relative;
    left: -5.2rem;
    font-weight: 100;
  }
  .yqh img {
    width: 58vw;
    height: 10vh;
    padding-bottom: 1rem;
  }
  .yp img {
    width: 9rem;
    height:9rem;
    padding-top: 1rem;
    position: relative;
    left: -1.5rem;
  }
  .white {
    color: #fff;
  }
  .jt {
    text-align: center;
    padding-top: 1.875rem;
    position: absolute;
    bottom: 0;
    left: 50%;
  }
  .jt img {
    width: 6vw;
    height: 6vh;
  }
  .hr {
    height: .125rem;
    background-color: #fee2a8;
    width: 50vw;
  }
  .neir {
    padding: .5rem 0;
    letter-spacing: .0625rem;
    width: 50vw;
    font-size: 1rem;
    font-weight: 400;
    color: #fee2a8;
  }
  .liaohao {
    font-size: .6rem;
    padding-left: 1.875rem;
    padding-bottom: 1.6rem;
    position: relative;
    top: -0.6rem;
    transform: scale(0.8);
    left: -3rem;
  }
  .wen {
    font-size: 0.4rem;
    font-weight: 400;
    color: #fee2a8;
    width: 80vw;
    letter-spacing: .15rem;
    padding-bottom: 1.6rem;
  }
  .wens{
    color: #fee2a8;
    font-size: 0.4rem;
  }
  .ti {
    font-size: 0.9rem;
    width: 22vw;
    background-color: #fee2a8;
    text-align: center;
    height: 1.2rem;
    line-height: 1.2rem;
    border-radius: 1.25rem;
    color: #7b0500;
    font-weight: bold;
    margin-bottom: 0.6rem;
  }
  </style>
  